pixiv chatstory の PWA としての取り組み
https://gyazo.com/650ade7a5067f0bbc2c5eb2b25072aed
ピクシブ福岡オフィス所属
チャット形式小説投稿できるサービス
PWAは初技術なので手探り
PWAの強み
Add to Home Screen
「ホーム画面に追加」
アプリのインストールバナー（App Install Banner）
１回目の訪問ではでてこないので、アプリのインストールの紹介をしている
ホーム画面に追加すると「アプリで開く」ができる
Android上ではアプリ扱い
内部に.apkを追加している
アプリの動作に必要なファイルをキャッシュしているとオフライン化
JSはファイルを分割して配信できる
必要な画面で*.chunk.jsを読み込む
Service Workerで必要なチャンクファイルを後読みしてキャッシュする
ネイティブアプリと比べるとインストール待ちを短くできる
初期ロードは最初の画面リソース
終わるとほかのリソースをキャッシュ開始
キャッシュが終わるとオフラインでも使える
更新があったら次のアクセス時にリソースをDL
次の次のアクセスは自動的にアップデートされている
オフライン機能
pixiv chatstoryは非対応
そもそもオフラインでも使えるというメリットな状況が日本はない…
マルチプラットフォーム対応
段階にふやしていった
当初の想定
インストールするとネイティブのフル機能
それ以外はViewerのみの提供
絞ったターゲット向けにとりあえず作る、あとで対応を拡大していった
PC Chrome
A2HSを必須じゃなくする
Firefox、Safari、Edge
日々の実装をささえる技術
RailsはAPIに専念してHTMLを返さない
pixiv Sketchと似た思想
Hosting Server
静的ファイルのホスティング
OGP処理
できればブラウザAPIだけで足りうるような設計にしている
依存が少なくて済むならそのほうが良いというスタンス
Ionicは3の途中からPWA対応
Webの世界で対応できていないことがある（SSRとかほかバグ有り）
バグは最悪の体験
ユーザーをバグで迎えたくない
PWAはクラッシュしないで静かに止まる
ユーザは気づけ無い
エラー収集はしているが、まずふせぎましょう
PR作ると自動でアプリ作成
毎日アプリを触る
リリース候補版に毎日ビルド
iOSとPWA両方触るようにする
クジ引きして触る担当を決めている
問題なくなってGo判断がでたらリリース